<template>
    <!-- 列表 -->
    <ContentWrap v-show="setView === 'list'">
      <HeaderTitle title="服务定制" content="配置本省微服务类型所监听的消息队列信息。"/>
        <el-button type="primary" @click="openForm('create')" class="mb-10px">
            新增
        </el-button>
        <el-table v-loading="loading" :data="list" row-key="id" header-cell-class-name="custom-header" stripe>
            <el-table-column align="center" type="index" label="序号" width="55" :index="indexMethod" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="交换机名称" prop="exchangeName" width="250">
                <template #default="scope">
                    <el-button type="text" @click="openForm('detail', scope.row.id)">{{ scope.row.exchangeName }}</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" :show-overflow-tooltip="true" label="队列名称" prop="queueName" width="250" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="微服务类型" prop="cloudType">
              <template #default="scope">
                {{getTypeLabel(scope.row.cloudType)}}
              </template>
            </el-table-column>
            <el-table-column align="center" :show-overflow-tooltip="true" label="队列码" prop="routingKey" with="200" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="备注" prop="remark" with="200" />
            <el-table-column align="center" label="启用" prop="enable">
                <template #default="scope">
                    <el-switch v-model="scope.row.enable" :active-value="1" :inactive-value="0"
                        @click="onChangeStateClick(scope.row)" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="160">
                <template #default="scope">
                    <el-button link type="primary" @click="openForm('update', scope.row.id)" :disabled="scope.row.enable==1">
                        修改
                    </el-button>
                    <el-button link type="danger" @click="handleDelete(scope.row.id)" :disabled="scope.row.enable==1">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNo"
          :total="total"
          @pagination="getList"
        />
    </ContentWrap>
    <CustomServicesForm ref="customServicesRef" @success="refresh" @setClose="setClose"  v-show="setView === 'addServers'"/>
</template>
<script lang="ts" setup>
// import { ElMessageBox, ElMessage } from 'element-plus'
import CustomServicesForm from './CustomServicesForm.vue';
import * as customServicesApi from '@/api/customServices/index'
import {DICT_TYPE,getDictOptions,getIntDictOptions } from '@/utils/dict'
defineOptions({ name: 'CustomServices' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10
})
const getTypeLabel = (value) => {
  const option = getIntDictOptions(DICT_TYPE.CLOUDTYPE).find(option => option.value === value);
  return option ? option.label : '';
};
const indexMethod = (index: number) => {
    const numberIndex = (queryParams.pageNo - 1) * queryParams.pageSize + index + 1
    return numberIndex
}

const setView = ref('list')
const setViewFun=(type:string)=>{
  setView.value=type;
}
const setClose = ()=>{
  setView.value = 'list'
}
// 新增、修改成功更新数据
const customServicesRef = ref()
const refresh = ()=>{
  setClose()
  getList()
}

/** 添加/修改操作 */
const openForm = (type: string, id?: string) => {
  setViewFun('addServers')
  customServicesRef.value.open(type,id)
}

/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await customServicesApi.getCustomServicesList(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        await customServicesApi.deleteCustomServices([id])
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}

const onChangeStateClick = async (row: any) => {
    try {
        // 修改状态的二次确认
        const text = row.enable === 1 ? '启用' : '停用'
        await message.confirm('确认要"' + text + '""' + row.exchangeName + '"交换机名称吗?')
        await customServicesApi.saveCustomServices({ enable: row.enable, id: row.id });
        message.success('修改成功')
        await getList()
    } catch {
        row.enable =
            row.enable === 1 ? 0 : 1
    }
}

/** 初始化 **/
onMounted(() => {
    getList()
})
</script>


<style scoped>
/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}
</style>
